<template>
  <div id="member_content">
    <div class="header">
      <el-row type="flex">
        <el-row type="flex">
          <el-input
            v-model="queryList.keyword"
            clearable
            placeholder="机构名称/手机号/机构负责人"
          />
          <el-select v-model="queryList.grade" clearable placeholder="全部">
            <el-option label="基础版" value="1" />
            <el-option label="标准版" value="2" />
            <el-option label="专业版" value="3" />
          </el-select>
          <el-button
            class="searchBtn"
            type="primary"
            @click="getList()"
          >查询</el-button>
          <!-- <el-button class="addTeachBtn" type="primary" @click="exportListExcel"
            >导出Excel</el-button
          > -->
        </el-row>
      </el-row>
    </div>
    <el-table
      :data="memberList"
      border
      fit
      highlight-current-row
      style="width: 100%"
      :element-loading-text="g.loadingStr"
      :header-cell-style="{ background: g.mainColor }"
    >
      <el-table-column label="序号" align="center" fixed>
        <template slot-scope="{ $index }">
          <span>{{ $index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品图" align="center" min-width="130">
        <template slot-scope="{ row }">
          <img style="width: 120px" :src="row.businessLogo">
        </template>
      </el-table-column>
      <el-table-column label="机构名称" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.businessName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="机构地址" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.businessAddress }}</span>
        </template>
      </el-table-column>
      <el-table-column label="机构负责人" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.principalName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.principalPhone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="会员名称" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="会员等级" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.grade }}</span>
        </template>
      </el-table-column>
      <el-table-column label="开通时间" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.createTime | parseTime("{y}-{m}") }} </span>
        </template>
      </el-table-column>
      <el-table-column label="剩余天数" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.remainDay }}</span>
        </template>
      </el-table-column>
      <el-table-column label="会员状态" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.status === 1 ? "使用中" : "禁用中" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" min-width="150">
        <template slot-scope="{ row }">
          <el-button
            type="primary"
            size="mini"
            @click="checkPositions(row)"
          >职位</el-button>
          <el-button
            :type="row.status === 1 ? 'danger' : 'success'"
            size="mini"
            @click="statusControl(1, row)"
          >{{ row.status === 1 ? "禁用" : "启用" }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="dialogOutTitle"
      :visible.sync="outerVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="1300px"
    >
      <el-table :data="organizationDataList" border style="width: 100%">
        <el-table-column label="职位" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.positionName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="工作地址" align="center" min-width="200">
          <template slot-scope="{ row }">
            <span>{{ row.workAddressDetail }}</span>
          </template>
        </el-table-column>
        <el-table-column label="学历" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.minimumEducationName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="工作经验" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.workExperienceName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="福利待遇" align="center" min-width="250">
          <template slot-scope="{ row }">
            <el-tag
              v-for="(item, index) of row.fringeBenefits"
              :key="index"
              :type="colors[row.fringeBenefits.indexOf(item) % colors.length]"
              style="margin: 0 10px"
            >{{ item }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="薪资" align="center">
          <template slot-scope="{ row }">
            <span>{{
              row.salaryMin === 0 && row.salaryMax === 0
                ? "面议"
                : row.salaryMin
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="推送(份)" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.sent }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="{ row }">
            <el-button
              type="primary"
              @click="pickTeacherType(row)"
            >选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        :title="dialogInsideTitle"
        :visible.sync="innerVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        append-to-body
        width="1300px"
      >
        <div class="headerForm">
          <el-input
            v-model="fonudWordTeacher.keyword"
            clearable
            placeholder="请输入老师姓名"
          />
          <el-button
            class="searchBtn"
            type="primary"
            @click="choosePositions"
          >搜索</el-button>
        </div>
        <div>
          <div>
            <el-table :data="teacherPositionsList" border style="width: 100%">
              <el-table-column label="姓名" align="center">
                <template slot-scope="{ row }">
                  <span>{{ row.nickName }}</span>
                </template>
              </el-table-column>
              <el-table-column label="年龄" align="center">
                <template slot-scope="{ row }">
                  <span>{{ birthday(row.birthday) + "岁" }}</span>
                </template>
              </el-table-column>
              <el-table-column label="性别" align="center">
                <template slot-scope="{ row }">
                  <span>{{ row.sex }}</span>
                </template>
              </el-table-column>
              <el-table-column label="学历" align="center">
                <template slot-scope="{ row }">
                  <span>{{ row.educationName }}</span>
                </template>
              </el-table-column>
              <el-table-column label="工作经验" align="center">
                <template slot-scope="{ row }">
                  <span>{{ birthday(row.joinWorkTime) + "年" }}</span>
                </template>
              </el-table-column>
              <el-table-column label="意向职位" align="center">
                <template slot-scope="{ row }">
                  <span>{{ row.positionChildName }}</span>
                </template>
              </el-table-column>
              <el-table-column label="工作性质" align="center">
                <template slot-scope="{ row }">
                  <span>{{ row.workNature === 1 ? "全职" : "兼职" }}</span>
                </template>
              </el-table-column>
              <el-table-column label="薪资" align="center" min-width="150">
                <template slot-scope="{ row }">
                  <span v-if="row.salaryMin === 0">{{ "面议" }}</span>
                  <span
                    v-else
                  >{{ row.salaryMin }}元/月 - {{ row.salaryMax }}元/月</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" min-width="150">
                <template slot-scope="{ row }">
                  <el-button
                    class="searchBtn"
                    type="primary"
                    @click="checkTeacherResumeInfo(row)"
                  >简历详情</el-button>
                  <el-button
                    class="searchBtn"
                    type="success"
                    :disabled="row.isRecommend === 0"
                    @click="statusControl(2, row)"
                  >{{ row.isRecommend === 0 ? "已推送" : "推送" }}</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <!-- 老师简历分页 -->
          <pagination
            v-show="teacherTotal > 0"
            :total="teacherTotal"
            :page.sync="fonudWordTeacher.currentPage"
            :limit.sync="fonudWordTeacher.pageSize"
            @pagination="choosePositions"
          />
        </div>
      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <!-- 机构招聘职位列表分页 -->
        <pagination
          v-show="orgTotal > 0"
          :total="orgTotal"
          :page.sync="orgDetail.currentPage"
          :limit.sync="orgDetail.pageSize"
          @pagination="checkPosition"
        />
      </div>
    </el-dialog>
    <resumeInfo
      ref="$resume"
      :is-show-dialog="teacherResumeInfoDialog"
      :user-id="userId"
      @closeDialog="closeResumeDialog"
    />
    <!-- 会员分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryList.currentPage"
      :limit.sync="queryList.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import * as position from '@/api/recruitment'
import Pagination from '@/components/Pagination'
import resumeInfo from '@/components/resumeInfo/resumeInfo'
import { getMemberList, handleStatus, exportMemberList } from '@/api/account'
export default {
  components: { Pagination, resumeInfo },
  data() {
    return {
      queryList: {
        keyword: '',
        businessId: 0,
        grade: '',
        currentPage: 1,
        pageSize: 10
      },
      colors: [
        '',
        'success',
        'info',
        'warning',
        'danger'
      ],
      total: 1,
      outerVisible: false,
      innerVisible: false,
      teacherResumeInfoDialog: false,
      dialogOutTitle: '',
      dialogInsideTitle: '',
      memberList: [],
      // 机构招聘信息列表
      organizationDataList: [],
      // 老师职位列表
      teacherPositionsList: [],
      // 机构详情
      orgDetail: {
        businessId: '',
        currentPage: 1,
        pageSize: 5
      },
      // 求职老师
      fonudWordTeacher: {
        keyword: '',
        currentPage: 1,
        pageSize: 5
      },
      orgTotal: 0,
      teacherTotal: 0,
      userId: '',
      orgDetailInfo: null,
      posiDetailInfo: null
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      getMemberList(this.queryList).then(res => {
        console.log(res)
        this.memberList = res.data.records
        this.total = res.data.total
      })
    },
    exportListExcel() {
      const queryLists = {
        keyword: this.queryList.keyword,
        businessId: this.queryList.businessId,
        grade: this.queryList.grade
      }
      exportMemberList(queryLists).then(res => {})
    },
    // 查看职位
    checkPositions(row) {
      console.log(row)
      this.orgDetailInfo = row
      this.outerVisible = true
      this.orgDetail.businessId = row.businessId
      this.dialogOutTitle = `${row.businessName}的招聘职位`
      this.checkPosition()
    },
    // 筛选条件查看机构所有职位
    checkPosition() {
      position.getOrgWithId(this.orgDetail).then(res => {
        const { records, total } = res.data
        this.orgTotal = total
        this.organizationDataList = records
        this.organizationDataList.forEach(item => {
          item.fringeBenefits = item.fringeBenefits.split(',')
        })
      })
    },
    // 查看简历
    checkTeacherResumeInfo(row) {
      this.teacherResumeInfoDialog = true
      this.userId = row.userId
      this.$refs.$resume.check_Teacher_Resume_Detail(row.userId)
    },
    // 关闭简历模态框
    closeResumeDialog(val) {
      this.teacherResumeInfoDialog = val
    },
    // 推送or禁用
    statusControl(num, row) {
      const tipsStr = num === 1 && row.status === 1 ? '确定禁用该机构' : '确定把该老师的简历推送到该机构'
      this.$confirm(`是否${tipsStr}`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        num === 1 && this.controlStatus(row.id, row.status === 1 ? '0' : '1')
        num === 2 && this.sentResumeToOrg(row)
      }).catch(() => { })
    },
    // 禁用启用
    controlStatus(id, status) {
      const obj = {
        id,
        status
      }
      handleStatus(obj).then(res => {
        const { code } = res
        code === '200' || this.$message.success('禁用成功')
        this.getList()
      })
    },
    // 新增推送
    sentResumeToOrg(row) {
      console.log(row)
      console.log(this.orgDetailInfo)
      console.log(this.posiDetailInfo)
      const queryObj = {
        businessId: this.posiDetailInfo.businessId,
        businessLogo: this.posiDetailInfo.businessLogo,
        businessName: this.posiDetailInfo.businessName,
        positionInfoId: this.posiDetailInfo.positionId,
        positionInfoName: this.posiDetailInfo.positionName,
        userProfileId: row.id,
        status: this.posiDetailInfo.status,
        receiverId: this.orgDetailInfo.createBy,
        isDel: this.posiDetailInfo.isDel
      }
      position.addRecommend(queryObj).then(res => {
        if (res.code === '200') return this.$message.success('推送成功')
      })
    },
    // 选择某个职位
    pickTeacherType(row) {
      this.dialogInsideTitle = `招聘职位：${row.positionName}（岗位类型）`
      this.posiDetailInfo = row
      this.innerVisible = true
      this.fonudWordTeacher.keyword = row.positionName
      this.choosePositions()
    },
    // 筛选条件选择某个职位
    choosePositions() {
      position.getWorkFromPosition(this.fonudWordTeacher).then(res => {
        const { records, total } = res.data
        this.teacherPositionsList = records
        this.teacherTotal = total
      })
    },
    // 计算年龄及工作经验
    birthday(timeer) {
      const birthdayTime = new Date(timeer).getTime()
      const nowTime = new Date().getTime()
      return Math.ceil((nowTime - birthdayTime) / 31536000000)
    }
  }
}
</script>

<style scoped lang='scss'>
#member_content {
  padding: 15px;
  .header {
    margin-bottom: 15px;
    .searchBtn {
      margin-left: 20px;
    }
    .el-row {
      .el-select {
        width: 250px;
        margin-left: 20px;
      }
    }
  }
}
.headerForm {
  display: flex;
  margin-bottom: 15px;
  .el-input {
    width: 200px;
    margin-right: 15px;
  }
}
.el-dialog__footer {
  /deep/ .pagination-container {
    padding: 0;
    margin: 0;
  }
}
.el-table__row {
  .cell {
    .el-tag {
      margin: 5px !important;
    }
  }
}
</style>
